<template>
  <div class="user-history">
    <div class="user-history-container">
      <!--      头部区域-->
      <div class="history-header">
        <span style="color: white; font-weight: bolder; font-size: 22px">
          历史记录
        </span>
      </div>
      <!--      历史列表-->
      <div class="user-history-list">
        <div
          class="user-history-list-item"
          v-for="(history, index) in histories"
          :key="index"
        >
          <img :src="history.thumbnail" alt="" />
          <div class="user-history-video-detail">
            <div
              class="user-history-video-detail-title"
              @click="jumpToVideoDetail(history.videoId)"
              style="cursor: pointer; font-size: 20px"
            >
              {{ history.title }}
            </div>
            <div class="user-history-video-detail-description">
              {{ history.description }}
            </div>
            <div class="user-history-video-detail-createTime">
              观看时间：{{ history.createTime }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 定义假数据：历史记录列表
const histories = ref([
  {
    thumbnail: 'https://via.placeholder.com/150',
    videoId: 'video-id-1',
    title: '视频标题1',
    description: '这是第一个视频的简短描述。',
    createTime: '2024-12-01',
  },
  {
    thumbnail: 'https://via.placeholder.com/150',
    videoId: 'video-id-2',
    title: '视频标题2',
    description: '这是第二个视频的简短描述。',
    createTime: '2024-11-28',
  },
  {
    thumbnail: 'https://via.placeholder.com/150',
    videoId: 'video-id-3',
    title: '视频标题3',
    description: '这是第三个视频的简短描述。',
    createTime: '2024-11-25',
  },
  // 可以继续添加更多历史记录...
])

// 跳转到视频详情页的方法（这里只是个示例）
function jumpToVideoDetail(videoId) {
  console.log('跳转到视频详情:', videoId)
  // 实际应用中，这里应该有逻辑来导航到视频详情页面
}
</script>

<style scoped lang="scss">
.user-history-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #4e4e7a;

  .history-header {
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .user-history-list {
    width: 60%;
    margin-top: 10px;

    .user-history-list-item {
      background-color: white;
      padding: 20px;
      display: flex;
      margin-bottom: 10px;
      border-radius: 5px;

      img {
        max-height: 90px;
        max-width: 160px;
        border-radius: 5px;
      }

      .user-history-video-detail {
        margin-left: 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .user-history-video-detail-createTime {
          color: gray;
        }
      }
    }
  }
}
</style>
